<template>
	<view class="content" @click="dragClick" 
		:style="{left:left + '%',top:top + '%',backgroundColor:background,width:width,height:height,marginLeft:marginLeft}">
		<image :src="image" mode="widthFix" :style="{width:imageWidth,backgroundSize:imageBackgroundSize}" v-if="image"></image>
		<!--
		@touchstart.capture="touchstart" @touchend.capture="touchend" @touchmove.capture="touchmove"
		-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// width:'100rpx',
				// height:'100rpx',
				left: '290',
				top: '90',
				isdrag: false,
				NowLeft: '',
				disX: '',
				NowTop: '',
				disY: ''
			};
		},
		mounted() {
			this.top = this.creatTop;
			this.left = this.creatLeft;
		},
		props: ['creatTop', 'creatLeft', 'image', 'background','imageWidth','width','height','marginLeft','imageBackgroundSize'],
		methods: {
			dragClick(){
				this.$emit('dragClick')
			},
			touchstart(e) {
				let that = this;
				this.isdrag = true;
				this.NowLeft = parseInt(that.left);
				this.NowTop = parseInt(that.top);
				this.disX = e.touches[0].pageX;
				this.disY = e.touches[0].pageY;
				return false;
			},
			touchend(e) {
				this.isdrag = false;
			},
			touchmove(e) {
				if (this.isdrag) {
					this.left = this.NowLeft + e.touches[0].pageX - this.disX;
					this.top = this.NowTop + e.touches[0].pageY - this.disY;
					return false;
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		/* background-color: rgb(56, 128, 255);1F479E */
		background-color: #1F479E;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px 0px;
		z-index: 99;
		overflow: hidden;
	}
	.content image{
		width: 40%;
	}
</style>
